<template>
    <!-- 瀑布流数据 -->
    <div>
        <van-list class="dataList bg" :class="className" v-model="loading" :finished="finished" @load="onLoad">
            <div class="item" v-for="item in list" :key="item.id" @click="goGoods(item)">
                <Commodity :activity_title="item.activity_title" :dayRent_new="item.dayRent_new"
                    :extension_title="item.extension_title" :imgurl="getOtherImageUrl(item.imgurl)" :title="item.title"
                    :min_price="item.min_price" :rent_label="item.rent_label">
                </Commodity>
            </div>
        </van-list>
        <loading v-show="loading"></loading>
    </div>
</template>
<script>
import { List } from 'vant';
import eventBus from '@/common/event-bus';
import Commodity from "@/components/Commodity.vue"
export default {
    name: "HomeWaterfall",
    props: { className: String },
    components: {
        [List.name]: List,
        Commodity,
    },
    data() {
        return {
            list: [],
            loading: false,
            finished: false,
            page: 1,
            pageSize: 10,
            index: 1,
        }
    },
    created() {
        // eventBus.$on("changeData", (index) => {
        //     if (this.index === index) return;
        //     this.index = index;
        //     this.cleanData();
        // })
    },
    methods: {
        cleanData() {
            this.page = 1;
            this.finished = false;
            this.list.splice(0);
        },
        onLoadHandle(res) {
            if (res.data.status === 200) {
                const { data } = res.data.data;
                if (data.length)
                    this.page++;
                else
                    this.finished = true
                this.list.push(...data)
            } else if (res.data.status === 300) {
                this.finished = true;
                this.$toast(res.data.msg);
                setTimeout(() => {
                    this.$router.push({ name: "login" })
                }, 2000);
            }
            this.loading = false;
        },
        onLoad() {
            this.loading = true;
            const data = {
                page: this.page,
                pageSize: this.pageSize,
            }
            if (this.className || this.index == 2) {
                if (this.index == 2) {
                    data.cateId = 2
                    this.$sendGet("Index/indexList", data)
                        .then(res => this.onLoadHandle(res))
                } else {
                    this.$sendGet("Centre/indexList", data) 
                        .then(res => this.onLoadHandle(res))
                }
            }
            else {
                this.$sendPost("Goods/getGoodsList", data)
                    .then(res => this.onLoadHandle(res))
            }
        },
        goGoods(item) {
            if (this.className || this.index == 2) {
                this.$router.push({ name: "goods", query: { goods_id: item.goods_id } })
            } else {
                this.$router.push({ name: "goods", query: { goods_id: item.id } })
            }
        }
    },
}
</script>
<style lang="scss" scoped>
::v-deep .van-list__loading {
    display: none;
}

.dataList {
    padding: 15px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 0;

    &.noPadding {
        padding: 0;
    }

    .item {
        width: 165px;
        margin-bottom: 15px;
        background-color: white;
        border-radius: 8px;
        overflow: hidden;

        &:nth-of-type(odd) {
            margin-right: 15px;
        }
    }
}
</style>